/**
 * 懒加载
 * js文件
 */
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'production',
  /**
   * 这样规定多入口文。
   * 如果是单入口文件，只会输出一个bundle.js
   */
  // entry: {
  //   index: resolve(__dirname, './src/js/index.js'),
  //   test: resolve(__dirname, './src/js/test.js'),
  // },

  entry: resolve(__dirname, './src/js/index.js'),

  /**
   * 1、比如打包一个jquery库，会很大。
   * 加入下面的代码，
   * 可以将 node_modules 中代码单独打包为一个chunk最终输出。
   *
   * 2、多入口文件，也可以使用下面的代码分割。
   * 会自动分析多入口文件中，有没有公共的文件。
   * 单独打包成为一个chunk。
   * 否则，有可能jquery会被多次打包。
   *
   * 3、单独打包单一文件，比如test.js。
   * 通过js代码，详情请看index.js。
   *
   */
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },

  output: {
    /**
     * 这里为了代码分割而做的设置。
     * entry 中是 main，那么这里的name就是“main.哈希值.js”
     */
    filename: 'js/[contenthash:10].js',
    path: resolve(__dirname, 'build'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: resolve(__dirname, './src/index.html'),
      minify: {
        collapseWhitespace: true,
        removeComments: true,
      },
    }),
  ],
}
